<script setup lang="ts">
import { useRouter,useRoute } from 'vue-router';
import { ref } from 'vue';
import type{ Ref } from 'vue';
import { computed } from 'vue';
const router=useRouter()
const route =useRoute()
function backClick(){
    router.go(-1)
}
const active=ref(Number(route.query.num))
let value:string =''
const issearch:Ref<boolean>=ref(false)
function cancelCilck(){
setTimeout(() => {
  issearch.value=false
  value=''
}, 0);
}
const classtype=computed(()=>{
  return issearch.value==true?"my-search2":"my-search"
})
const unpalys=JSON.parse(localStorage.getItem("unpalys"))
console.log(unpalys);
const success=JSON.parse(localStorage.getItem("success"))
false
const falses=JSON.parse(localStorage.getItem("false"))
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>我的订单</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <van-search 
:class="classtype" 
@click="issearch=true" 
v-model="value" 
placeholder="搜索" 
show-action
background="rgba(255, 0, 0, 0)" 
shape="round" >
<template #action>
    <div v-show="issearch==true" class="cancel" @click="cancelCilck">取消</div>
  </template>
</van-search>
<van-tabs swipeable v-model:active="active">
  <van-tab title="已确认">  <div v-if="success"  class="homecard" v-for="item in success">
<van-image class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div>
<div v-else class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div></van-tab>
  <van-tab title="待支付"> <div v-if="unpalys"  class="homecard" v-for="item in unpalys">
<van-image  class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div>
<div v-else class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div>
</van-tab>
  <van-tab title="退款中"> <div v-if="falses"  class="homecard" v-for="item in falses">
<van-image class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div>
<div v-else class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div>
</van-tab>
  <van-tab title="全部订单">
    <div v-if="success&&unpalys&&falses" class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div>
   <div v-else>
    <div class="homecard" v-for="item in unpalys">
<van-image class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div>
<div  class="homecard" v-for="item in falses">
<van-image class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div><div   class="homecard" v-for="item in success">
<van-image  class="cardimg" :src=item.img  alt="" />
<div class="cardtitle">拱北华山别墅</div>
<div class="cardcontet">{{ item.kind }}· {{item.bed }}居{{ item.bed }}床{{ item.bed }}人·123平米</div>
<div class="Price">￥{{ item.price }}</div>
</div>
  </div>

</van-tab>
</van-tabs>

    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.nodate{
        width: 100%;
        height: 374px;
        position: relative;
        .img{
            position: absolute;
            left: 116px;
            top: 80px;
        }
        .nodatetext{
            position: absolute;
            font-size: 16px;
            left: 170px;
            top: 270px;
        }
    }
.content{
    background-color: #f4f6f9;
    width: 100%;
    .homecard{
    width: 90%;
    height: 85px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 2px 4px  #eaeaea;
    position: relative;
    overflow: hidden;
    .cardimg{
        width: 130px;
        position: absolute;
        left: -10px;
        top: 0;
    }
    .cardtitle{
        font-size: 15px;
        position: absolute;
        left: 130px;
        top: 0;
    }
    .cardcontet{
        font-size: 13px;
        position: absolute;
        left: 130px;
        top: 30px;
    }
    .Price{
        font-size: 20px;
        position: absolute;
        left: 128px;
        bottom: 5px;
        color: #ff9b54;
        font-weight: 500;
    }
}
  
}


</style>
    